<template>
  <div class="test_box_audio">
    <div class="audio">
      <div class="title">麦克风：</div>
      <el-select v-model="audioId" size="small" placeholder="请选择">
        <el-option
          v-for="item in audioList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-progress
      :text-inside="true"
      :stroke-width="26"
      :percentage="value"
    ></el-progress>
    <!-- <audio controls="controls"></audio> -->
    <!-- 能否在上方看到 -->
    <div class="problem">对着麦克风说话，是否能看到音量条跳动？</div>
    <div class="choose_button">
      <el-button @click="chooseStatus(1)" :class="status == 1 ? 'active' : ''"
        >可以看到</el-button
      >
      <el-button @click="chooseStatus(2)" :class="status == 2 ? 'active' : ''"
        >不能看到</el-button
      >
    </div>
    <!-- 提示 -->
    <div class="tips" v-if="status == 2">
      <p>听不到声音？试试如下方法：</p>
      <p>1、请在浏览器弹窗中选择允许使用摄像头</p>
      <p>2、若是外接摄像头，试试换个插口重新插入</p>
      <p>3、在选择项中选择正确的麦克风</p>
      <p>4、关闭其他使用摄像头的应用程序</p>
      <p>5、尝试重启电脑</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      audioList: [],
      status: 0,
      MediaStream: null,
      Audio: null,
      audioId: 0,
    };
  },
  mounted() {
    this.getMedia();
  },
  destroyed() {
    this.Audio.suspend();
    this.Audio.close();
  },
  methods: {
    chooseStatus(item) {
      this.status = item;
      //   可以看到
      if (item == 1) {
        this.$emit("sysStatus", true);
      } else {
        //   不可以看到
        this.$emit("sysStatus", false);
      }
    },
    getMedia() {
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          stream.getTracks().forEach((item, index) => {
            if (item.kind == "audio") {
              if (!this.audioId) {
                this.audioId = item.id;
              }
              this.audioList.push({
                label: item.label,
                value: item.id,
              });
            }
          });
          // 将麦克风的声音输入这个对象
          let Audio = new AudioContext();
          this.Audio = Audio;
          let mediaStreamSource = Audio.createMediaStreamSource(stream);
          // 创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
          let scriptProcessor = Audio.createScriptProcessor(4096, 1, 1);
          // 将该分析对象与麦克风音频进行连接
          mediaStreamSource.connect(scriptProcessor);
          // 此举无甚效果，仅仅是因为解决 Chrome 自身的 bug
          scriptProcessor.connect(Audio.destination);
          // 开始处理音频
          scriptProcessor.onaudioprocess = (e) => {
            // 获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
            let buffer = e.inputBuffer.getChannelData(0);
            // 获取缓冲区中最大的音量值
            let maxVal = Math.max.apply(Math, buffer);
            // 显示音量值
            this.value = Math.round(maxVal * 100);
          };
        })
        .catch((error) => {
          console.log("获取音频时好像出了点问题。" + error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.test_box_audio {
  padding: 0 65px;
  min-height: 400px;
  box-sizing: border-box;
  .audio {
    display: flex;
    align-items: center;
    margin-left: -65px;
    .title {
      width: 64px;
      text-align: left;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 16px;
    }
    .el-select-dropdown__item {
      // padding: 0 10px;
    }
  }
  .el-select {
    width: 460px;
  }
  .el-progress {
    margin-top: 30px;
    width: 460px;
  }
  .problem {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
  }
  .choose_button {
    font-size: 0;
    margin-top: 13px;
    button {
      display: inline-block;
      height: 29px;
      width: 137px;
      margin-right: 50px;
      line-height: 29px;
      padding-top: 0;
      padding-bottom: 0;
      cursor: pointer;

      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }
    .active {
      background: #475aa7;
      border: solid 1px #475aa7;
      color: #ffffff;
    }
  }
  .tips {
    margin-top: 30px;
    p {
      margin: 0;
      padding: 0;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 18px;
    }
  }
}
</style>

